<template>
    <div class="unemployment" id="unemployment">

    </div>
</template>

<script>
export default {
    mounted() {
        this.initChart()
    },
    methods: {
        initChart() {

            const chart = this.$echarts.init(document.getElementById('unemployment'));
            var data = {
                title: '失业率变动',
                color: ['#00AAFF', '#A52A2A'],
                x: this.unemployment.datax,
                y: [{ min: null, max: null, }],
                data: [
                    {
                        name: '男性失业人数比例',

                        data: this.unemployment.datay
                    },
                    {
                        name: '女性失业人数比例',
                        data: this.unemployment.datay1
                    },
                ],
            };
            //前端细节区分
            var tip = {
                tofiexd: 0, //y轴刻度保留2位数小数
                unit: '%', //y轴刻度单位
            };
            var type = 'line_auto_up_down';
            const option = {

                title: {
                    text: '失业率',

                    textStyle: {
                        color: 'rgb(85, 85, 85)',
                        fontSize: 14,
                        fontWeight: 100
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    confine: true,
                    axisPointer: {
                        type: 'line',
                    },
                },
                legend: {
                    data: ['男性失业人数比例', '女性失业人数比例'],
                    orient: 'vertical',
                    left: 'center',
                    bottom: 'bottom',
                    padding: [5, 0, 5, 0],
                    textStyle: {
                        color: '#747474',
                    },

                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    axisTick: {
                        show: true,
                    },
                    axisLine: {
                        show: true,
                    },
                    data: ['2000', '2002', '2004', '2006', '2008', '2010', '2012', '2014'],

                },
                yAxis: [
                    {
                        type: 'value',
                        show: true,
                        min: null,
                        max: null,

                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#eeeeee',
                            },
                        },
                        axisLine: {
                            lineStyle: { color: '#fff' },
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLine: {
                            show: true,
                        },

                    },
                    {
                        type: 'value',
                        show: false,
                        min: null,
                        max: null,

                        splitLine: { show: false },
                        axisLine: {
                            lineStyle: { color: '#fff' },
                        },
                    },
                ],
                grid: {
                    top: '20%',
                    left: '2%',
                    right: '5%',
                    bottom: '10%',
                    containLabel: true
                },
                series: [

                ],
            };
            //后端传数据源进行处理
            if (data.title) {
                option.title.text = data.title;
            }
            if (data.color) {
                var arrColor = data.color;
                option.color = arrColor;
            }
            if (data.x) {
                option.xAxis.data = data.x;
            }
            //全局处理设置Y轴刻度单位（默认无单位），显示多少位小数(默认0位)
            var sunit = '',
                stofixed = 0;
            //前端控制设置
            if (tip) {
                if (tip.tofiexd) {
                    stofixed = tip.tofiexd;
                }
                if (tip.unit) {
                    sunit = tip.unit;
                }
            }
            for (var mm = 0; mm < data.y.length; mm++) {
                if (data.y[mm].name) {
                    option.yAxis[mm].name = data.y[mm].name;
                }
                if (data.y[mm].min) {
                    option.yAxis[mm].min = data.y[mm].min;
                }
                if (data.y[mm].max) {
                    option.yAxis[mm].max = data.y[mm].max;
                }

                option.yAxis[mm].axisLabel = {
                    formatter: function (val) {
                        if (stofixed == 0) {
                            return val + sunit;
                        } else {
                            return val.toFixed(stofixed) + sunit;
                        }
                    },
                };
            }
            if (data.y.length > 1) {
                //双Y轴处理
                option.yAxis[1].show = true;
            }
            //line_auto_up_down标注文字上下自动排序显示类型处理
            if (type == 'line_auto_up_down') {
                var arrVal1 = [],
                    arrVal2 = [];
                for (var i = 0; i < data.data.length; i++) {
                    var val = data.data[i];
                    var tmp = {
                        name: val.name,
                        yAxisIndex: 0,
                        type: 'line',
                        data: [],
                    };
                    for (var j = 0; j < val.data.length; j++) {
                        var vval = {

                            value: val.data[j],
                            label: {
                                show: true,
                                formatter(params) {
                                    let htmlStr = Math.abs(params.value) + '%'
                                    return htmlStr
                                }
                            },
                        };
                        tmp.data.push(vval);
                    }
                    option.series.push(tmp);
                }

                for (var j = 0; j < data.data[0].data.length; j++) {
                    arrVal1.push(data.data[0].data[j]);
                    arrVal2.push(data.data[1].data[j]);
                }
                //判断数组大小并进行上下自动显示
                if (arrVal1.length == arrVal2.length) {
                    for (var j = 0; j < arrVal1.length; j++) {
                        var val0 = option.series[0].data[j].value;
                        var val1 = option.series[1].data[j].value;
                        if (Number(val0) > Number(val1) || Number(val0) == Number(val1)) {
                            option.series[0].data[j].label.position = 'top';
                            option.series[1].data[j].label.position = 'bottom';
                        } else {
                            option.series[0].data[j].label.position = 'bottom';
                            option.series[1].data[j].label.position = 'top';
                        }
                    }
                }
            }

            chart.setOption(option);
            window.onresize = function () {
                chart.resize()
            }
        }
    },
    props: ['unemployment']
}
</script>

<style lang="less" scoped>
.unemployment {
    box-sizing: border-box;
    padding: 10px 0 0 10px;
    width: 510px;
    height: 100%;
    background-color: #fff;
}
</style>